<!doctype html>
<html lang='en'>
  <head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>

    <!-- Bootstrap CSS -->
    <link rel='stylesheet' href='css/bootstrap.min.css'>
    <link rel='stylesheet' href='css/custom.style.css'>

    <title>Staking Pool</title>
  </head>
  <body>
    <nav class='navbar navbar-expand-md navbar-dark fixed-top bg-dark'>
      <a class='navbar-brand' href='#'>Staking Pool</a>
      <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarsExampleDefault' aria-controls='navbarsExampleDefault' aria-expanded='false' aria-label='Toggle navigation'>
        <span class='navbar-toggler-icon'></span>
      </button>

      <div class='collapse navbar-collapse' id='navbarsExampleDefault'>
        <ul class='navbar-nav mr-auto'>
          <li class='nav-item active'>
            <a class='nav-link' href='#'>Home <span class='sr-only'>(current)</span></a>
          </li>
        </ul>
        <button id='b_refresh' class='btn btn-primary' type='submit'>Refresh Account</button>
        <span id='t_account' class='navbar-text ml-2'>
          Unlock MetaMask
        </span>
      </div>
    </nav>

    <main role='main' class='container'>
      <img id='i_metamask' src='img/metamask.png' class='img-fluid mx-auto d-none' alt='MetaMask'/>
      <div class='jumbotron'>
        <h1>Ether Staking Pool</h1>
        <p class="lead">Follow these short instructions to get started earning staking rewards.</p>
        <ol>
          <li>Login to <a href="//metamask.io">MetaMask</a>.</li>
          <li>Deposit Ether.</li>
          <li>Request to Stake Ether.</li>
          <li>Requests are fulfilled daily.</li>
          <li>Earn Ether.</li>
        </ol>

      </div>
      <hr />
      <div class='row'>
        <div class='col-sm-6'>
          <h2>Transactions</h2>
          <hr />
          <div class='input-group mb-3'>
            <div class='input-group-prepend'>
              <button class="btn btn-primary xa-btn-wa" type="button" id="b_trx">Deposit</button>
            </div>
            <input id='i_value' type='text' class='form-control' placeholder='Value in ether'  aria-describedby='value-send'>
          </div>
          <div class='input-group mb-3'>
            <div class='input-group-prepend'>
              <button class="btn btn-primary xa-btn-wa" type="button" id="b_withdrawal">Withdraw</button>
            </div>
            <input id='i_withdrawal' type='text' class='form-control' placeholder='Value in ether' aria-describedby='value-send'>
            <div class='input-group-append'>
              <button class="btn btn-primary" type="button" id="b_max">Max</button>
            </div>
          </div>
          <div class='input-group mb-3'>
            <div class='input-group-prepend'>
              <button class="btn btn-primary xa-btn-wa" type="button" id="b_stake">Stake</button>
            </div>
            <input id='i_stake' type='text' class='form-control' placeholder='Value in ether' aria-describedby='value-send'>
            <div class='input-group-append'>
              <button class="btn btn-primary" type="button" id="b_max_stake">Max</button>
            </div>
          </div>
          <div class='input-group mb-3'>
            <div class='input-group-prepend'>
              <button class="btn btn-primary xa-btn-wa" type="button" id="b_ustake">Unstake</button>
            </div>
            <input id='i_ustake' type='text' class='form-control' placeholder='Value in ether' aria-describedby='value-send'>
            <div class='input-group-append'>
              <button class="btn btn-primary" type="button" id="b_max_ustake">Max</button>
            </div>
          </div>
        </div> <!-- end column -->

        <div class='col-sm-6'>
          <h2>Balances</h2>
          <hr />
          <table class='table'>
            <tbody>
              <tr>
                <td>Deposited Balance:</td>
                <td><span id='s_value'></span></td>
              </tr>
              <tr>
                <td>Requested Stake</td>
                <td><span id='s_req_stake'></span></td>
              </tr>
              <tr>
                <td>Requested Unstake</td>
                <td><span id='s_req_unstake'></span></td>
              </tr>
              <tr>
                <td>Staked Balance:</td>
                <td><span id='s_staked'></span></td>
              </tr>
              <tr>
                <td></td>
                <td><span></span></td>
              </tr>
            </tbody>
          </table>
        </div> <!-- end column -->
      </div> <!-- end row -->
      <hr />

      <div id="warning" class="alert alert-warning alert-dismissible fade show d-none" role="alert">
        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <img id='spinner'class='text-center d-none'  src='img/DoubleRing-1s-200px.svg' alt='spinner' />

    </main> <!-- end main container -->

    <div id="testing">
      <!--
      <button id='b_balance' class='btn btn-primary ml-3' type='submit'>Get balance</button>
      <button id='b_send' class='btn btn-primary ml-3' type='submit'>Send Ether</button>
      -->
    </div>

    <footer class='footer'>
      <div class='container text-center'>
        &copy; Copyright <span id='year'></span> by
        <a href='https://www.leroscapital.com'>Leros Capital LLC</a>
        &bull;
        <a href='https://loading.io/spinner/custom/165634/'>spinner by loading.io</a>
        &bull;
        <a href='https://getbootstrap.com/'>css by bootstrap</a>
      </div>
    </footer>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js (included in bootstrap bundle), then Bootstrap JS -->
    <script src='js/jquery-3.3.1.min.js'></script>
    <script src='js/bootstrap.bundle.min.js'></script>
    <script src='js/web3.min.js'></script>
    <script src='js/truffle-contract.js'></script>
    <script src='js/ui.js'></script>
    <script src='js/app.js'></script>
    <script src='js/server-actions.js'></script>
    <script>
      // window waits for everything to load, not just DOM
      // $( window ).on( 'load', readyFn )
      // Shorthand for $( document ).ready()
      $(function () {
        console.log('$ ready!')
        App.init()
        Srv.init()
      })
    </script>
  </body>
</html>
